<template>
  <div class="rob" v-if="robPage">
    <div class="main">
      <div class="top">
        <div class="icon">
          <img src alt>
        </div>Matthew
      </div>
      <div class="open" @click="open"></div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "rob",
  computed: {
    ...mapGetters(["robPage"])
  },
  methods: {
    ...mapActions(["isRobPage"]),
    open() {
      this.isRobPage();
    }
  }
};
</script>
<style lang="stylus" scoped>
.rob {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;

  .main {
    width: 6.14rem;
    height: 8.92rem;
    background: rgba(225, 96, 76, 1) url('../img/open.png');
    background-size: 100% 100%;
    border-radius: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .top {
      width: 100%;
      height: 1.5rem;
      margin-top: 2rem;
      text-align: center;
      color: #F9E2B6;
      font-size: 13px;

      .icon {
        width: 0.95rem;
        height: 0.95rem;
        margin: 5px auto;
        background: pink;
        border-radius: 0.05rem;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .open {
      width: 1.82rem;
      height: 1.82rem;
      // background: pink;
      position: absolute;
      top: 77%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
